var Wbox = document.querySelector("#Wbox");
var flag = false;
var nums = 0; 
Wbox.innerHTML += `
	<button id="btn">GO</div>
	`
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
	flag = true;
	btn.remove();
	if(flag==true){
	game();
	
}
});
function game(){
	Wbox.innerHTML += `
	<div class="gamebox"></div>
	`
//



var gamebox = document.querySelector(".gamebox");

function template2() {
	gamebox.innerHTML += `
	<div class="mbox"></div>
	`
}

for(let i = 1; i <= 5; i++) {
	template2();

}

var mbox = document.getElementsByClassName("mbox");

mbox.innerHTML += `
	<div class="mmbox" data-type=""></div>
	`

for(let i = 0; i < 5; i++) {
	//	console.log(mbox[i])
	for(let j = 1; j <= 4; j++) {
		mbox[i].innerHTML += `
	<div class="mmbox"></div>
	`
	}
}
var mmbox = document.getElementsByClassName("mmbox");

for(let i = 1; i <= 20; i++) {

	mmbox[i - 1].classList.add("fl");
	for(let j = 0; j < 2; j++) {
		if(j == 0) {
			mmbox[i - 1].innerHTML +=
				`
		<div class="side one"></div>
		`
		} else {
			mmbox[i - 1].innerHTML +=
				`
		<div class="side two"></div>
		`
		}
	}

}
var arr = [],
	cont = 0;
for(let i = 0; i < 20; i++) {
	mmbox[i].setAttribute("d","1");
	t = Math.random() * 5 + 1;
	n = Math.floor(t);
	if(arr.length < 4) {
		arr[i] = n;
	} else {
		for(let j = 0; j < arr.length; j++) {
			//			console.log(j);
			if(n == arr[j]) {
				cont++;
			}
		}
		if(cont < 4) {
			arr[i] = n;
			cont = 0;
		} else {
			i--;
			cont = 0;
		}
	}
	//	console.log(n);
}
//console.log(arr);
 var one = document.getElementsByClassName("one");
  var two = document.getElementsByClassName("two");
for(let i = 0; i < 20; i++) {
	if(arr[i] == 1) {
		mmbox[i].setAttribute("date-type", "red");
		one[i].classList.add("red");
	} else if(arr[i] == 2) {
		mmbox[i].setAttribute("date-type", "green");
		one[i].classList.add("green");
	} else if(arr[i] == 3) {
		mmbox[i].setAttribute("date-type", "yellow");
		one[i].classList.add("yellow");
	} else if(arr[i] == 4) {
		mmbox[i].setAttribute("date-type", "black");
		one[i].classList.add("black");
	} else {
		mmbox[i].setAttribute("date-type", "blue");
		one[i].classList.add("blue");
	}
}
//var side = document.getElementsByClassName("side")
var num = 0,tem,tems,num2=0,flag=true;

//mmbox[0].setAttribute("d","1");
//
//console.log(mmbox[0].getAttribute("d")==1)
var numbox = document.getElementsByClassName("numbox")[0]
var span = numbox.getElementsByTagName("span")[0];
for(let i=0;i<20;i++){
			mmbox[i].addEventListener("click",c,false);	
	function c(){
		if(mmbox[i].getAttribute("d")==1){
		num2++;
		span.innerHTML=
		`
		${num2}
		`
//		console.log(num2);
		if(num<2){
			mmbox[i].style.transform="rotateY(180deg)";
//			mmbox[i].removeEventListener("click",c,false)
			num++;
			if(num==1){
				tem=i;
				
//				nums++;
			}
			if(num == 2){
			tems=i
			
//			num++;
			}
			
			if(tem!=undefined&tems!=undefined){
				if(tem!=tems){
			t = setTimeout(function(){
				
					if((mmbox[tem].getAttribute("date-type")==mmbox[tems].getAttribute("date-type"))){
			one[tem].style.opacity=0
			one[tems].style.opacity=0;
			two[tems].style.opacity=0;
			two[tem].style.opacity=0;          
			mmbox[tem].setAttribute("d","2");
				mmbox[tems].setAttribute("d","2");
			tem=undefined;
			tems=undefined;
			num=0;
			nums+=2;
			if(nums==20){
				gamebox.remove();
			    nums=0;
			    flag=false;
			    
			    Wbox.innerHTML += `
			    
			  <span id="mrak">
			  <span>得分</span>
			  ${num2}</span>
	<button id="btn2">再玩一次</div>
	`
var btn2 = document.getElementById("btn2");
var mrak = document.getElementById("mrak");
btn2.addEventListener("click",function(){
	flag = true;
	btn2.remove();
	mrak.remove();
	if(flag==true){
	game();
	
}
});
			    
			}
			
			}
			else{
				mmbox[tem].style.transform="rotateY(360deg)";
				mmbox[tems].style.transform="rotateY(360deg)";
				
				num=0;
				tem=undefined;
				tems=undefined;
				
			}
			},600)
				}
				else{
					num--;
				}
				
		
			
			
			}
			}
			
		
	}
		
	}
      
			
	
	
}
}
